/* .wide {
    border: 1px solid red;
} */

.med {
    display: flex;
    justify-content: center;
}

.med >div:nth-child(1){
    /* border: 1px solid black; */
    width: 1500px;
}

/* ---------------------------第一大div之新闻动态与图片---------------------------------------- */
/* 设置背景图与新闻动态与图片居中 */
.med > div:nth-child(1) >div:nth-child(1) {
    margin-top: -150px;
    display: flex;
    justify-content: center;
    background-image: url('../img/3_fhea.png');
    background-size: 100% 100%;
    width: 1500px;
    height: 700px;
}

/* 设置包裹新闻动态与图片的div的尺寸 */
.med > div:nth-child(1) >div:nth-child(1) > div:nth-child(1) {
    width: 1200px;
    /* border: 1px solid red; */
}

/* 设置包裹图片div的div的尺寸 */
.med > div:nth-child(1) >div:nth-child(1) > div:nth-child(1) > div:nth-child(2) {
    display: flex;
    justify-content: center;
}

/* 设置包裹图片的div的尺寸 */
.med > div:nth-child(1) >div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) {
    width: 900px;
    height: 320px;
    /* border: 1px solid red; */
    display: flex;
    justify-content: center;
}

/* 设置包裹图片的完全填充 */
.med > div:nth-child(1) >div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) img {
    width: 100%;
    height: 100%;
}

/* ------------------------------书籍类别-------------------------------------- */
/* 第二大div整体居中 */
.med > div:nth-child(1) > div:nth-child(2) {
    margin-top: -270px;
    display: flex;
    justify-content: center;
    /* border: 1px solid red; */
}


/* 设置导航标题与下面具体内容尺寸 */
.med > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) {
    width: 1200px;
}

/* 导航标题格式 */
.med > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) {
    display: flex;
    /* border: 1px solid black; */
    justify-content: space-around;
    color: green;
    font-size: 20px;
    margin-bottom: 10px;
}

/* 设置标题下划线 */
.med > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) >div>div:nth-child(1) {
    padding-bottom: 5px;
    border-bottom: 3px solid white;
    cursor: pointer;
}

/* 设置标题hover事件 */
/* 设置标题下划线 */
.med > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) >div>div:nth-child(1):hover {
    font-weight: bold;
    border-bottom: 3px solid green;
}



/* ----------------------------待展示的书籍----------------------------------------- */

/* 设置包裹所有书籍信息的div居中 */
.med >div:nth-child(1) > div:nth-child(2) > div:nth-child(1)>div:nth-child(2) {
    /* border: 1px solid red; */
    display: flex;
    justify-content: center;

}

/* 设置包裹每本书籍信息的div的格式 */
.med >div:nth-child(1) > div:nth-child(2) > div:nth-child(1)>div:nth-child(2)>div:nth-child(1){
    /* border: 1px solid red; */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 1200px;
    height: 800px;

}

/* 设置每本书籍信息的div的格式与尺寸 */
.med >div:nth-child(1) > div:nth-child(2) > div:nth-child(1)>div:nth-child(2)>div:nth-child(1) >div{
    border: 1px solid gray;
    margin-right: 20px;
    margin-top: 20px;
    color: gray;
    display:flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 350px;
    width: 250px;
}

/* 设置每本书籍img的div尺寸 */
.med >div:nth-child(1) > div:nth-child(2) > div:nth-child(1)>div:nth-child(2)>div:nth-child(1) >div >div:nth-child(1){
    height: 250px;
    width: 250px;
} 

/* 填充每本书籍img */
.med >div:nth-child(1) > div:nth-child(2) > div:nth-child(1)>div:nth-child(2)>div:nth-child(1) >div >div:nth-child(1)>img{
    height:100%;
    width: 100%;
} 

/* 设置每本书籍信息的div的hover事件 */
.med >div:nth-child(1) > div:nth-child(2) > div:nth-child(1)>div:nth-child(2)>div:nth-child(1) >div:hover{
    border-color: red;
}

.med >div:nth-child(1) > div:nth-child(2) > div:nth-child(1)>div:nth-child(2)>div:nth-child(1) >div{
    cursor: pointer;
}

/* 设置每本书籍的标题尺寸与样式 */
.med >div:nth-child(1) > div:nth-child(2) > div:nth-child(1)>div:nth-child(2)>div:nth-child(1) >div >div:nth-child(2) >div:nth-child(1){
    color: black;
    font-weight: bold;
    width: 130px;
    /* border: 1px solid red; */
    text-align: center;
    /* line-height: 25px; */

}

/* 设置价格与对应的金额的总体样式 */
.med >div:nth-child(1) > div:nth-child(2) > div:nth-child(1)>div:nth-child(2)>div:nth-child(1) >div >div:nth-child(2) >div:nth-child(3){
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

/* 设置具体金额的颜色与格式 */
.med >div:nth-child(1) > div:nth-child(2) > div:nth-child(1)>div:nth-child(2)>div:nth-child(1) >div >div:nth-child(2) >div:nth-child(3)>div:nth-child(2){
    color: red;
    margin-left: 5px;
}

/* ---------------------------------页码------------------------------------------------------ */
/* 设置页码居中 */
.med > div:nth-child(1) > div:nth-child(3){
    display:flex;
    justify-content: center;
}

/* 设置页码格式 与包裹div的尺寸*/
.med > div:nth-child(1) > div:nth-child(3) >div:nth-child(1){
    display:flex;
    /*width: 400px;*/
    /* border: 1px solid red; */
    justify-content: space-around;
    color: green;
    font-size: 25px;
    margin-top: 10px;

}

/*
!* 设置页码边框*!
.med > div:nth-child(1) > div:nth-child(3) >div:nth-child(1)>div{
    text-align: center;
    width: 25px;
    height: 25px;
    !* border: 1px solid green; *!
    cursor: pointer;
}
!* 设置页码边框事件*!
.med > div:nth-child(1) > div:nth-child(3) >div:nth-child(1)>div:hover {
    font-weight: bold;
}*/
